<template>
  <div>
    <el-form class="query-table-form" :inline="true">
      <el-form-item>
        <select-address
          v-model="params.address_code"
          placeholder="地址查询"
          clearable
          :auto-top="true"
          @change="getData()"
        ></select-address>
      </el-form-item>
      <el-form-item>
        <el-input
          v-model="params.customer_name"
          placeholder="企业名称查询"
          :clearable="true"
          @keyup.native.enter="getData()"
        ></el-input>
      </el-form-item>
      <el-form-item>
        <el-input
          v-model="params.corp_name"
          placeholder="负责人查询"
          :clearable="true"
          @keyup.native.enter="getData()"
        ></el-input>
      </el-form-item>
      <el-form-item>
        <c-select
          v-model="params.loan_approval_status"
          :options="loanStatus"
          clearable
          placeholder="项目状态"
          @change="getData()"
        ></c-select>
      </el-form-item>
      <el-form-item>
        <el-button @click="getData()">查询</el-button>
        <el-button
          icon="el-icon-download"
          :loading="exportLoading"
          @click="exportExcel('项目列表')"
        >
          导出
        </el-button>
      </el-form-item>
    </el-form>
    <c-table border class="table-sm" v-loading="loading" :columns="tableColumns" :data="tableData">
      <template v-slot:address="scope">
        <div class="text-truncate" :title="scope.row.address">{{ scope.row.address }}</div>
      </template>
      <template v-slot:useDir="scope">
        <div class="text-truncate" :title="scope.row.funds_use_dir">
          {{ scope.row.funds_use_dir }}
        </div>
      </template>
      <template v-slot:status="scope">
        <span class="badge" :class="`badge-${scope.row.statusStyle}`">
          {{ scope.row.statusLabel }}
        </span>
      </template>
    </c-table>

    <div class="query-pagination">
      <div></div>
      <el-pagination
        layout="total, prev, pager, next, jumper"
        :current-page.sync="params.index"
        :page-size="params.size"
        :total="tableCount"
        @current-change="getData"
      ></el-pagination>
    </div>

    <el-dialog
      :visible.sync="reportVisible"
      :close-on-click-modal="false"
      append-to-body
      top="30px"
      width="80%"
    >
      <el-tabs>
        <el-tab-pane label="项目信息">
          <project-info :related-data="viewRow"></project-info>
        </el-tab-pane>
        <el-tab-pane label="放款登记">
          <register-edit view-mode :queryId="queryId"></register-edit>
        </el-tab-pane>
        <el-tab-pane label="附件">
          <attach-view :queryId="queryId" :visible="reportVisible"></attach-view>
        </el-tab-pane>
      </el-tabs>
    </el-dialog>

    <register-dialog
      :visible.sync="editVisible"
      :query-id="editQueryId"
      @success="getData()"
    ></register-dialog>
  </div>
</template>

<script>
import SelectAddress from '@/components/select/SelectAddress'
import taskTableMixin from '@/bigbank/views/self/taskTable'
import ProjectInfo from '@/bank/views/business/library/ProjectInfo'
import AttachView from '@/credit/components/AttachView'
import RegisterEdit from '@/bigbank/views/self/components/RegisterEdit'
import RegisterDialog from '@/bigbank/views/self/components/RegisterDialog'
export const loanStatus = {
  0: '待登记',
  3: '已放款',
  4: '已拒绝',
}

const loanStatusStyle = {
  0: 'muted',
  3: 'success',
  4: 'danger',
}
export default {
  components: {
    SelectAddress,
    ProjectInfo,
    AttachView,
    RegisterEdit,
    RegisterDialog,
  },
  mixins: [taskTableMixin],
  props: {},
  data() {
    return {
      loanStatus,
      tableName: 'customer_related',
      order: {
        claim_time: 'desc',
      },
      params: {
        index: 1,
        size: 15,
        'claim_status.eq': 1,
        'is_need_gua.eq': 0,
      },
      tableColumns: [
        {
          attrs: { label: '项目名称', prop: 'customer_name', minWidth: '110px' },
          process: (v, row) => ({
            attrs: { class: 'project-history', attrs: { 'data-history': row.is_history } },
          }),
        },
        { attrs: { label: '地址', prop: 'address' }, slot: 'address' },
        { attrs: { label: '负责人', prop: 'corp_name', align: 'center' } },
        { attrs: { label: '联系电话', prop: 'mobile_no', align: 'center' } },
        { attrs: { label: '放款期限(月)', prop: 'months', align: 'center' } },
        { attrs: { label: '放款金额(万元)', prop: 'reply_funds', align: 'center' } },
        { attrs: { label: '资金用途', prop: 'funds_use_dir' }, slot: 'useDir' },
        { attrs: { label: '新建时间', prop: 'create_time', align: 'center' } },
        { attrs: { label: '提交人', prop: 'submit_person_name', align: 'center' } },
        {
          attrs: { label: '项目状态', prop: 'statusLabel', align: 'center' },
          slot: 'status',
        },
        {
          attrs: { label: '操作', align: 'center', width: 120 },
          operations: [
            {
              content: '登记',
              icon: 'fa fa-edit',
              event: this.handleEdit,
              ifRender: row => +row.confuse_status !== 3 && row.bank_id === this.clientId,
            },
            { content: '查看', icon: 'fa fa-search', event: this.handleView },
          ],
        },
      ],
      loading: false,
      tableCount: 0,
      tableData: [],
      reportVisible: false,
      viewRow: {},
      queryId: '',

      editVisible: false,
      editQueryId: '',
    }
  },
  computed: {},
  watch: {},
  created() {
    this.getData()
  },
  mounted() {},
  methods: {
    dataAdapter(item) {
      item.statusLabel = loanStatus[item.loan_approval_status]
      item.statusStyle = loanStatusStyle[item.loan_approval_status]
      return item
    },
    handleEdit(row) {
      this.editQueryId = row.customer_related_id
      this.editVisible = true
    },
    handleView(row) {
      this.queryId = row.customer_related_id
      this.viewRow = row
      this.reportVisible = true
    },
  },
}
</script>

<style lang="scss" scoped></style>
